<template>
  <div>
    <Alert show-icon>An info prompt</Alert>
    <Alert type="success" show-icon>A success prompt</Alert>
    <Alert type="warning" show-icon>A warning prompt</Alert>
    <Alert type="error" show-icon>An error prompt</Alert>
    <br/>
    <br/>
    <Alert>
      An info prompt
      <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
    </Alert>
    <Alert type="success">
      A success prompt
      <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
    </Alert>
    <Alert type="warning">
      A warning prompt
      <template slot="desc">
        Content of prompt. Content of prompt. Content of prompt.
      </template>
    </Alert>
    <Alert type="error">
      An error prompt
      <span slot="desc">
            Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
        </span>
    </Alert>
    <br/>
    <br/>
    <Alert show-icon>
      An info prompt
      <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
    </Alert>
    <Alert type="success" show-icon>
      A success prompt
      <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
    </Alert>
    <Alert type="warning" show-icon>
      A warning prompt
      <template slot="desc">
        Content of prompt. Content of prompt. Content of prompt.
      </template>
    </Alert>
    <Alert type="error" show-icon>
      An error prompt
      <span slot="desc">
            Custom error description copywriting.
        </span>
    </Alert>
    <Alert show-icon>
      Custom icon
      <Icon type="ios-bulb-outline" slot="icon"></Icon>
      <template slot="desc">Custom icon copywriting. Custom icon copywriting. Custom icon copywriting. </template>
    </Alert>
    <br/>
    <br/>
    <Alert closable>An info prompt</Alert>
    <Alert type="success" show-icon closable>
      A success prompt
      <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
    </Alert>
    <Alert type="warning" closable>
      Custom closing content
      <span slot="close">No longer prompt</span>
    </Alert>
    <br/>
    <Button @click="message('info')">info</Button>
    <Button @click="message('success')">success</Button>
    <Button @click="message('warning')">warning</Button>
    <Button @click="message('error')">error</Button>
    <Button @click="message('loading')">loading</Button>
    <br/>
    <br/>
    <p>With desc</p>
    <Button @click="info(false)">Info</Button>
    <Button @click="success(false)">Success</Button>
    <Button @click="warning(false)">Warning</Button>
    <Button @click="error(false)">Error</Button>
    <p>Only title</p>
    <Button @click="info(true)">Info</Button>
    <Button @click="success(true)">Success</Button>
    <Button @click="warning(true)">Warning</Button>
    <Button @click="error(true)">Error</Button>
    <br/>
    <br/>
    <Button type="primary" @click="modal1 = true">Display dialog box</Button>
    <Modal
        v-model="modal1"
        title="Common Modal dialog box title"
        @on-ok="ok"
        @on-cancel="cancel">
      <p>Content of dialog</p>
      <p>Content of dialog</p>
      <p>Content of dialog</p>
    </Modal>
    <br/>
    <br/>
    <Button @click="instance('info')">Info</Button>
    <Button @click="instance('success')">Success</Button>
    <Button @click="instance('warning')">Warning</Button>
    <Button @click="instance('error')">Error</Button>
    <br/>
    <br/>
    <Button @click="confirm">confirm</Button>
    <br/>
    <br/>
    <Button @click="value1 = true" type="primary">Open</Button>
    <Drawer title="Basic Drawer" placement="left" :closable="false" v-model="value1">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </Drawer>
    <br/>
    <br/>
    <Button @click="value4 = true" type="primary">Open4</Button>
    <Drawer :closable="false" width="640" v-model="value4">
      <p :style="pStyle">User Profile</p>
      <p :style="pStyle">Personal</p>
      <div class="demo-drawer-profile">
        <Row>
          <i-col span="12">
            Full Name: Aresn
          </i-col>
          <i-col span="12">
            Account: aresn@aresn.com
          </i-col>
        </Row>
        <Row>
          <i-col span="12">
            City: BeiJing
          </i-col>
          <i-col span="12">
            Country: China
          </i-col>
        </Row>
        <Row>
          <i-col span="12">
            Birthday: May 14, 1991
          </i-col>
          <i-col span="12">
            Website: <a href="https://dev.iviewui.com" target="_blank">https://dev.iviewui.com</a>
          </i-col>
        </Row>
        Message: Hello, Developer
      </div>
      <Divider />
      <p :style="pStyle">Company</p>
      <div class="demo-drawer-profile">
        <Row>
          <i-col span="12">
            Position: Programmer
          </i-col>
          <i-col span="12">
            Responsibilities:Coding
          </i-col>
        </Row>
        <Row>
          <i-col span="12">
            Department: Map visualization
          </i-col>
        </Row>
        Skills:C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.
      </div>
      <Divider />
      <p :style="pStyle">Contacts</p>
      <div class="demo-drawer-profile">
        <Row>
          <i-col span="12">
            Email: admin@aresn.com
          </i-col>
          <i-col span="12">
            Phone Number: +86 18888888888
          </i-col>
        </Row>
        <Row>
          <i-col span="12">
            GitHub: <a href="https://github.com/view-design/ViewUI" target="_blank">https://github.com/iview/iview</a>
          </i-col>
        </Row>
      </div>
    </Drawer>
    <br/>
    <br/>
    <Tree :data="data2" show-checkbox></Tree>
    <br/>
    <br/>
    <br/>
    <div class="top">
      <Tooltip content="Top Left text" placement="top-start">
        <Button>Top Left</Button>
      </Tooltip>
      <Tooltip content="Top Center text" placement="top">
        <Button>Top Center</Button>
      </Tooltip>
      <Tooltip content="Top Right text" placement="top-end">
        <Button>Top Right</Button>
      </Tooltip>
    </div>
    <div class="center">
      <div class="center-left">
        <Tooltip content="Left Top text" placement="left-start">
          <Button>Left Top</Button>
        </Tooltip><br><br>
        <Tooltip content="Left Center text" placement="left">
          <Button>Left Center</Button>
        </Tooltip><br><br>
        <Tooltip content="Left Bottom text" placement="left-end">
          <Button>Left Bottom</Button>
        </Tooltip>
      </div>
      <div class="center-right">
        <Tooltip content="Right Top text" placement="right-start">
          <Button>Right Top</Button>
        </Tooltip><br><br>
        <Tooltip content="Right Center text" placement="right">
          <Button>Right Center</Button>
        </Tooltip><br><br>
        <Tooltip content="Right Bottom text" placement="right-end">
          <Button>Right Bottom</Button>
        </Tooltip>
      </div>
    </div>
    <div class="bottom">
      <Tooltip content="Bottom Left text" placement="bottom-start">
        <Button>Bottom Left</Button>
      </Tooltip>
      <Tooltip content="Bottom Center text" placement="bottom">
        <Button>Bottom Center</Button>
      </Tooltip>
      <Tooltip content="Bottom Right text" placement="bottom-end">
        <Button>Bottom Right</Button>
      </Tooltip>
    </div>
    <br/>
    <br/>
    <br/>
    <div class="top">
      <Poptip title="Title" content="content" placement="top-start">
        <Button>Top Left</Button>
      </Poptip>
      <Poptip title="Title" content="content" placement="top">
        <Button>Top Center</Button>
      </Poptip>
      <Poptip title="Title" content="content" placement="top-end">
        <Button>Top Right</Button>
      </Poptip>
    </div>
    <div class="center">
      <div class="center-left">
        <Poptip title="Title" content="content" placement="left-start">
          <Button>Left Top</Button>
        </Poptip><br><br>
        <Poptip title="Title" content="content" placement="left">
          <Button>Left Center</Button>
        </Poptip><br><br>
        <Poptip title="Title" content="content" placement="left-end">
          <Button>Left Bottom</Button>
        </Poptip>
      </div>
      <div class="center-right">
        <Poptip title="Title" content="content" placement="right-start">
          <Button>Right Top</Button>
        </Poptip><br><br>
        <Poptip title="Title" content="content" placement="right">
          <Button>Right Center</Button>
        </Poptip><br><br>
        <Poptip title="Title" content="content" placement="right-end">
          <Button>Right Bottom</Button>
        </Poptip>
      </div>
    </div>
    <div class="bottom">
      <Poptip title="Title" content="content" placement="bottom-start">
        <Button>Bottom Left</Button>
      </Poptip>
      <Poptip title="Title" content="content" placement="bottom">
        <Button>Bottom Center</Button>
      </Poptip>
      <Poptip title="Title" content="content" placement="bottom-end">
        <Button>Bottom Right</Button>
      </Poptip>
    </div>
    <br/>
    <br/>
    <Progress :percent="25" />
    <Progress :percent="45" status="active" />
    <Progress :percent="65" status="wrong" />
    <Progress :percent="100" />
    <Progress :percent="25" hide-info />
    <br/>
    <br/>
    <div style="height: 100px;">
      <Progress vertical :percent="25" />
      <Progress vertical :percent="45" status="active" />
      <Progress vertical :percent="65" status="wrong" />
      <Progress vertical :percent="100" />
      <Progress vertical :percent="25" hide-info />
    </div>
    <br/>
    <br/>
    <div class="demo-avatar">
      <Avatar icon="ios-person" size="large" />
      <Avatar icon="ios-person" />
      <Avatar icon="ios-person" size="small" />
    </div>
    <div class="demo-avatar">
      <Avatar shape="square" icon="ios-person" size="large" />
      <Avatar shape="square" icon="ios-person" />
      <Avatar shape="square" icon="ios-person" size="small" />
    </div>
    <br/>
    <br/>
    <Tag>标签一</Tag>
    <Tag>标签二</Tag>
    <Tag closable>标签三</Tag>
    <Tag color="default">default</Tag>
    <Tag color="primary">primary</Tag>
    <Tag color="success">success</Tag>
    <Tag color="error">error</Tag>
    <Tag color="warning">warning</Tag>
    <Tag color="magenta">magenta</Tag>
    <Tag color="red">red</Tag>
    <Tag color="volcano">volcano</Tag>
    <Tag color="orange">orange</Tag>
    <Tag color="gold">gold</Tag>
    <Tag color="yellow">yellow</Tag>
    <Tag color="lime">lime</Tag>
    <Tag color="green">green</Tag>
    <Tag color="cyan">cyan</Tag>
    <Tag color="blue">blue</Tag>
    <Tag color="geekblue">geekblue</Tag>
    <Tag color="purple">purple</Tag>
    <Tag color="#FFA2D3">Custom Color</Tag>
    <br><br>
    <Tag type="border" closable color="primary">标签一</Tag>
    <Tag type="border" closable color="success">标签二</Tag>
    <Tag type="border" closable color="error">标签三</Tag>
    <Tag type="border" closable color="warning">标签四</Tag>
    <br><br>
    <Tag type="dot" closable color="primary">标签一</Tag>
    <Tag type="dot" closable color="success">标签二</Tag>
    <Tag type="dot" closable color="error">标签三</Tag>
    <Tag type="dot" closable color="warning">标签四</Tag>
    <br/>
    <br/>
    <Tag checkable color="primary">标签一</Tag>
    <Tag checkable color="success">标签二</Tag>
    <Tag checkable color="error">标签三</Tag>
    <Tag checkable color="warning">标签四</Tag>
    <br/>
    <br/>
    <Carousel v-model="value9" loop>
      <CarouselItem>
        <div class="demo-carousel">1</div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel">2</div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel">3</div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel">4</div>
      </CarouselItem>
    </Carousel>
    <br/>
    <br/>
    <br/>
    <Timeline>
      <TimelineItem>
        <p class="time">1976年</p>
        <p class="content">Apple I 问世</p>
      </TimelineItem>
      <TimelineItem>
        <p class="time">1984年</p>
        <p class="content">发布 Macintosh</p>
      </TimelineItem>
      <TimelineItem>
        <p class="time">2007年</p>
        <p class="content">发布 iPhone</p>
      </TimelineItem>
      <TimelineItem>
        <p class="time">2010年</p>
        <p class="content">发布 iPad</p>
      </TimelineItem>
      <TimelineItem>
        <p class="time">2011年10月5日</p>
        <p class="content">史蒂夫·乔布斯去世</p>
      </TimelineItem>
    </Timeline>
    <Timeline>
      <TimelineItem color="green">发布1.0版本</TimelineItem>
      <TimelineItem color="green">发布2.0版本</TimelineItem>
      <TimelineItem color="red">严重故障</TimelineItem>
      <TimelineItem color="blue">发布3.0版本</TimelineItem>
    </Timeline>
    <br/>
    <br/>
    <Timeline pending>
      <TimelineItem>发布1.0版本</TimelineItem>
      <TimelineItem>发布2.0版本</TimelineItem>
      <TimelineItem>发布3.0版本</TimelineItem>
      <TimelineItem><a href="#">查看更多</a></TimelineItem>
    </Timeline>
    <br/>
    <br/>
    <br/>
    <br/>
  </div>
</template>

<script>
  export default {
    name: "iview_other",
    props: {
      
    },
    data() {
      return {
        modal1: false,
        value1: false,
        value4: false,
        data2: [
          {
            title: 'parent 1',
            expand: true,
            children: [
              {
                title: 'parent 1-1',
                expand: true,
                children: [
                  {
                    title: 'leaf 1-1-1'
                  },
                  {
                    title: 'leaf 1-1-2'
                  }
                ]
              },
              {
                title: 'parent 1-2',
                expand: true,
                children: [
                  {
                    title: 'leaf 1-2-1'
                  },
                  {
                    title: 'leaf 1-2-1'
                  }
                ]
              }
            ]
          }
        ],
        value9: 0
      }
    },
    mounted() {
    
    },
    methods: {
      message (type) {
        if (type == 'info') {
          this.$Message.info({
            content: 'Tips for manual closing',
            duration: 1000,
            closable: true
          });
        }
        else if (type == 'success') {
          this.$Message.success({
            content: 'Tips for manual closing',
            duration: 1000,
            closable: true
          });
        }
        else if (type == 'warning') {
          this.$Message.warning({
            content: 'Tips for manual closing',
            duration: 1000,
            closable: true
          });
        }
        else if (type == 'error') {
          this.$Message.error({
            content: 'Tips for manual closing',
            duration: 1000,
            closable: true
          });
        }
        else if (type == 'loading') {
          this.$Message.loading({
            content: 'Tips for manual closing',
            duration: 1000,
            closable: true
          });
        }
      },
      info (nodesc) {
        this.$Notice.info({
          title: 'Notification title',
          desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
        });
      },
      success (nodesc) {
        this.$Notice.success({
          title: 'Notification title',
          desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
        });
      },
      warning (nodesc) {
        this.$Notice.warning({
          title: 'Notification title',
          desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
        });
      },
      error (nodesc) {
        this.$Notice.error({
          title: 'Notification title',
          desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
        });
      },
      ok () {
        this.$Message.info('Clicked ok');
      },
      cancel () {
        this.$Message.info('Clicked cancel');
      },
      instance (type) {
        const title = 'Title';
        const content = '<p>Content of dialog</p><p>Content of dialog</p>';
        switch (type) {
          case 'info':
            this.$Modal.info({
              title: title,
              content: content
            });
            break;
          case 'success':
            this.$Modal.success({
              title: title,
              content: content
            });
            break;
          case 'warning':
            this.$Modal.warning({
              title: title,
              content: content
            });
            break;
          case 'error':
            this.$Modal.error({
              title: title,
              content: content
            });
            break;
        }
      },
      confirm () {
        this.$Modal.confirm({
          title: 'Title',
          content: '<p>Content of dialog</p><p>Content of dialog</p>',
          onOk: () => {
            this.$Message.info('Clicked ok');
          },
          onCancel: () => {
            this.$Message.info('Clicked cancel');
          }
        });
      },
    },
    computed: {
      
    },
    watch: {
      
    }
  }
</script>

<style scoped>
.top,.bottom{
  text-align: center;
}
.center{
  width: 300px;
  margin: 10px auto;
  overflow: hidden;
}
.center-left{
  float: left;
}
.center-right{
  float: right;
}
</style>